import React ,{Component} from 'react';
import { connect } from 'react-redux';
import  { actionCreators }  from './store/index';
import NoteListComponent from './components/NoteListComponent';
import RecommendedComponent from './components/RecommendedComponent';
import { Modal } from 'antd';
import {
    Homewrap,
    RightContent,
    LeftContent,
    CarWrap,
    Itemwrap,
    ItemContent,
    Board,
    Top
} from './style.js';

class Home extends Component {


    render () {
        const { ItemList ,isShow} = this.props;
        const newItemList = ItemList.toJS();
        return (
            <Homewrap>
               <RightContent>
                  <CarWrap>
                    <img src="http://upload.jianshu.io/admin_banners/web_images/4355/90aa72980ef59c6cb49f851edc095329fb695a92.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="540"/>
                  </CarWrap>
                  <Itemwrap>
                      {
                          newItemList.map((val,index)=>{
                              return (
                                <ItemContent key={index} onClick={this.handleModal.bind(this)}>
                                    <img src={val.imgUrl} alt=""/>
                                    <span className="item_text">{val.itemText}</span>
                                </ItemContent>
                              )
                          })
                      }
                  </Itemwrap>
                  <NoteListComponent/>
               </RightContent>
               <LeftContent>
                  <Board></Board>
                  <RecommendedComponent/>
               </LeftContent>
               {isShow?<Top onClick={this.goTop.bind(this)}>回到顶部</Top>:''}
               
            </Homewrap>
        )
    }
    handleModal(){
        const modal = Modal.success({
            title: '抱歉！！！',
            content: '还没有完成暂时到这里~谢谢!',
          });
        setTimeout(() => modal.destroy(), 3000);
    };
    componentDidMount() {
        this.props.getHomeItemList();
        this.showTopTipComponent();
    };
    componentWillUnmount(){
        window.removeEventListener('scroll',this.props.showTopTip);
    };
    goTop(){
        window.scrollTo(0,0);
    };
    showTopTipComponent(){
        window.addEventListener('scroll',this.props.showTopTip);
    }
};


const mapStateToProps = (state) =>{
    return {
        ItemList:state.getIn(['home','ItemList']),
        isShow:state.getIn(['home','tip'])
    }
}

const mapDispathToProps = (dispath) =>{
   return {
    getHomeItemList(){
        dispath(actionCreators.getHomeItemList());
    },
    showTopTip(){
        if(document.documentElement.scrollTop > 100){
            dispath(actionCreators.showTopTip(true));
        }else{
            dispath(actionCreators.showTopTip(false));
        }
        
    }
   }
}
export default connect(mapStateToProps,mapDispathToProps)(Home);